<template>
    <van-sticky>
        <van-nav-bar
            title="商品评价"
            left-text="返回"
            left-arrow
            @click-left="OnBack"
        />
    </van-sticky>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
        <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            finished-text="没有更多了"
            @load="OnLoad"
        >
            <div class="comment-list">
                <div class="item" v-for="item in CommentList" :key="item.id">
                    <div class="user">
                        <div class="avatar">
                            <img :src="item.business.avatar_text" alt="">
                        </div>
                        <div class="nickname">
                            {{ item.business.nickname }}
                        </div>
                        <div class="rate">
                            <van-rate
                                v-model="item.rate"
                                :size="14"
                                color="#ffd21e"
                                void-icon="star"
                                void-color="#eee"
                                readonly
                            />
                        </div>
                    </div>
                    <div class="content">
                        {{ item.comment }}
                    </div>
                    <div class="img-box" v-if="item.thumbs_text.length > 0">
                        <van-image
                            width="4rem"
                            height="4rem"
                            fit="cover"
                            v-for="(thumb,index) in item.thumbs_text"
                            :key="index"
                            :src="thumb"
                            @click="OnOpenThumb(thumb)"
                        />
                    </div>
                </div>
            </div>

            <!-- 返回顶部 -->
            <van-back-top />

        </van-list>
    </van-pull-refresh>

    <!--  -->
    <van-popup v-model:show="ThumbPopupShow" :style="{width:'100%',maxWidth:'100%'}">
        <van-image
            width="100%"
            height="100%"
            fit="cover"
            :src="thumb"
            :style="{display:'block'}"
        />
    </van-popup>
</template>

<script setup>
    const { proxy } = getCurrentInstance();

    const CommentList = ref([]);
    const proid = ref(proxy.$route.query.proid ?? 0);
    const page = ref(1);
    const refreshing = ref(false);
    const loading = ref(false);
    const finished = ref(false);

    // 弹出层
    const ThumbPopupShow = ref(false);
    const thumb = ref('');

    const OnRefresh = () =>
    {
        // 清空查询参数
        page.value = 1;
        CommentList.value = [];
        finished.value = false;
        loading.value = true;
        refreshing.value = true;

        // 可以去掉定时器
        setTimeout(OnLoad,1500);
    }
    
    const OnLoad = async () =>
    {
        // 判断是否为加载中的状态
        if(refreshing.value)
        {
            refreshing.value = false;
        }

        // 请求参数
        let params = {
            proid:proid.value,
            page:page.value
        }

        let result = await proxy.$POST({
            url:'/product/comment',
            params
        })

        // 请求发送完毕后，加载状态也就完毕了
        loading.value = false;

        if(result.code === 1)
        {
            let count = result.data ? result.data.count : 0;
            CommentList.value = result.data ? CommentList.value.concat(result.data.list) : [];

            // 把评分转成整数，因为评分组件绑定值的数据类型是Number
            CommentList.value.map(item =>
            {
                item.rate = parseInt(item.rate);
            })

            if(CommentList.value.length >= count)
            {
                finished.value = true;

                return false;
            }

            page.value = page.value + 1;

        }else
        {
            // 如果没有更多数据了 就说明已经加载到底了....
            finished.value = true;

            proxy.$fail(result.msg);
        }
    }

    // 看评价图片大图
    const OnOpenThumb = (value) =>
    {
        ThumbPopupShow.value = true;

        thumb.value = value;
    }

    const OnBack = () => proxy.$router.back();
</script>

<style scoped>
.van-pull-refresh{
    min-height: 90vh;
    margin-top: 10px;
}

.comment-list .item{
    padding: 10px 15px;
}

.item .user{
    display: flex;
    align-items: center;
}

.item .user .avatar{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.item .user .nickname{
    font-weight: bold;
    margin-right: 10px;
}

.item .content{
    font-size: 14px;
    margin-left: 2.8em;
}

.item .img-box{
    margin-left: 2.5em;
    margin-top: 10px;
}

.item .van-image{
    margin-right: 12px;
}

.van-image:nth-child(4n){
    margin-right: 0;
}

</style>